import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import './subView.scss';
import { hashHistory } from 'react-router';
import QueueAnim from 'rc-queue-anim';


class SubViewHandle {
    constructor() {
        let self = this;
        this.config = {};
        this.Nodes = [];
        window.FW.on('subviewBack', function () {
            hashHistory.goBack();
        });
        this.hash = window.location.hash.split('?')[0].replace(/[#//?]/g, '');
        setInterval(function () {
            let hash = window.location.hash.split('?')[0].replace(/[#//?]/g, '');
            if (self.hash !== hash) {
                if (hash.indexOf('_') !== -1) {
                    subViewHandle.historyPop();
                } else {
                    subViewHandle.popAllView();
                }
            } else if (hash.indexOf('_') !== -1 && self.Nodes.length === 0) {
                hash = window.location.hash.split('_')[0].replace(/[#//?]/g, '');
                hashHistory.replace(hash);
            }
            self.hash = hash;
        }, 150);
    }

    historyPush(replace) {
        this.subpop = true;
        let hash = window.location.hash.split('_')[0].replace(/[#//?]/g, '');
        if (replace) {
            hashHistory.replace(hash + '_' + (this.Nodes[this.Nodes.length - 1][2]));
        } else {
            hashHistory.push(hash + '_' + (this.Nodes[this.Nodes.length - 1][2]));
        }
    }

    historyPop() {
        if (!this.subpop && this.Nodes.length > 0) {
            this.fallBack();
        } else if (this.Nodes.length === 0) {
            let hash = window.location.hash.split('_')[0].replace(/[#//?]/g, '');
            hashHistory.push(hash);
        }
        this.subpop = false;
    }

    fallBack(cb) {
        var self = this;
        self.popView();
        if (cb) {
            cb();
        }
    }

    close() { // 返回按钮 函数
        this.subpop = false;
        hashHistory.goBack();
    }
    popView() {
        if (this.Nodes.length > 0) {
            let n = this.Nodes.pop();
            let node = n[0];
            ReactDOM.unmountComponentAtNode(node);
            node.parentNode.removeChild(node);
        }
    }
    popAllView() {
        while (this.Nodes.length > 0) {
            let n = this.Nodes.pop();
            let node = n[0];
            ReactDOM.unmountComponentAtNode(node);
            node.parentNode.removeChild(node);
        }
    }

    replaceView(viewName, config) {
        let self = this;
        if (this.Nodes.length > 0) {
            self.popView();
            self.pushView(viewName, config, true);
        } else {
            this.pushView(viewName, config);
        }
    }
    pushView(viewName, config, replace) {
        replace = config.replace || replace;
        let self = this;
        let node = document.createElement("div");
        $(document.body).append(node);
        let reactNode = ReactDOM.render(
            <SubView config={config} viewName={viewName} />, node);
        this.Nodes.push([node, reactNode, viewName]);
        this.config = config;
        self.historyPush(replace);
    }

}

if (!window.subViewHandle) {
    window.subViewHandle = new SubViewHandle();
}
let subViewHandle = window.subViewHandle;

const SubView = React.createClass({
    getInitialState() {
        return { show: false, module: null, options: null }
    },
    componentDidMount() {
        var self = this;
        window.SubViewRoutes[this.props.viewName](function (Module, options) {
            if (!options) {
                options = {};
            }

            self.state.module = <Module modelData={self.props.config.modelData || {}} subview={true} />
            self.setState({ module: self.state.module, options: options, show: true })
        });
    },
    back(cb) {
        this.setState({
            show: !this.state.show,
        });
        this.backCb = cb;
    },
    onEnd({ key, type }) {
        if (type === 'leave') {
            subViewHandle.close();
            if (this.backCb) {
                this.backCb();
                this.backCb = null;
            }
        }
    },
    render() {
        let backNode, confirmButtonNode, config = this.props.config, header, className, node;
        if (this.state.show) {
            if (this.state.options) {
                if (this.state.options.confirmButtonHtml) {
                    let confirmButtonHtml = this.state.options.confirmButtonHtml;
                    confirmButtonNode = <div>{confirmButtonHtml}</div>
                }
                if (!config.hideBack) {
                    backNode = <div onClick={this.back.bind(this, null)}><i className="icon-back"></i><span>返回</span></div>
                }
            }
            if (config.hideBar !== true) {
                header = <div className="fw-header flex">
                    <div className="hideView flex-col-3">
                        {backNode}
                    </div>
                    <h1 className="viewTitle flex-col-6">{config.title}</h1>
                    <div className="flex-col-3">
                        {confirmButtonNode}
                    </div>
                </div>
            }

            let moduleNode = <div className="subview-loading">
                <div className='loadpicture'></div>
            </div>
            if (this.state.module) {
                moduleNode = this.state.module;
            }
            node = <div className="subview" key='1'>
                <div data-id={config.moduleName} className={'page ' + className} >
                    {header}
                    <div className="subview-content flex-g-1">
                        {moduleNode}
                    </div>
                </div>
            </div>
        }
        return (
            <QueueAnim delay={100} duration={500} className="subview"
                onEnd={this.onEnd}
                animConfig={[
                    { translateX: ['0%', '100%'] },
                    { translateX: ['0%', '100%'] }
                ]}>
                {node}
            </QueueAnim>
        );
    }
});
const SubViewLink = React.createClass({
    onClick(e) {
        e.preventDefault();
        if (this.props.disabled) {
            return;
        }
        if (!window.SubViewRoutes[this.props.moduleName]) {
            console.log('moduleName页面模块名不存在:' + this.props.moduleName);
        }
        subViewHandle.pushView(this.props.moduleName, this.props);
    },
    render() {
        return <a onClick={this.onClick} className={this.props.className}>{this.props.children}</a>;
    }
});

export { SubViewLink, subViewHandle };

